<template>
  <div class="main">
    <ul>
      <li @click="select(item)" v-for="(item,key) in charts" class="visual-icon" :class="item.className+' '+(typesFile==item.typesFile?'disabled':'')" :title="item.name"></li>
      <li @click="select(item)" v-for="(item,key) in mycharts" class="visual-icon" :class="item.className+' '+(typesFile==item.typesFile?'disabled':'')" :title="item.name"></li>
      <li style="display: inline-block;vertical-align: 6px;" @click="dialogUploadVisible=true"><i class="fa fa-upload" @click="dialogUploadVisible=true"></i></li>
    </ul>
    <el-dialog title="上传自定义图表" custom-class="data-select-dialog" :visible.sync="dialogUploadVisible">
      <div style="padding: 20px">
        <el-form ref="form" :model="form">
          <el-form-item label="名称">
            <el-input type="text" v-model="form.name">
            </el-input>
          </el-form-item>
          <el-form-item label="自定义图表">
            <el-tooltip class="item" effect="dark" content="请按Highchart绘图的参数填写" placement="bottom">
              <el-input type="textarea" v-model="form.content" :rows="10">
              </el-input>
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="upload">上传</el-button>
            <el-button @click="dialogUploadVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import http from 'assets/js/http'
export default {
  props: ['dashboard', 'canvasItem'],
  data() {
    return {
      dialogUploadVisible: false,
      form: {
        name: '我的图表',
        content: ['{',
          '  "xAxis": [',
          '    {',
          '      "type": "category",',
          '      "index": 0,',
          '      "isX": true',
          '    }',
          '  ],',
          '  "series": [',
          '    {',
          '      "_colorIndex": 0,',
          '      "_symbolIndex": 0',
          '    }',
          '  ],',
          '  "chart": {',
          '    "type": "area",',
          '    "polar": true,',
          '    "style": {',
          '      "fontFamily": "微软雅黑, Arial, Helvetica, sans-serif",',
          '      "color": "#333",',
          '      "fontSize": "12px",',
          '      "fontWeight": "normal",',
          '      "fontStyle": "normal"',
          '    }',
          '  },',
          '  "plotOptions": {',
          '    "series": {',
          '      "animation": false',
          '    }',
          '  }',
          '}'
        ].join("\n")
      },
      mycharts: [],
      //typesFile对应他types文件夹下面js文件名
      //className对应图标样式
      charts: [{
          "name": "堆积条形图",
          "type": "highchart",
          "typesFile": "1.1",
          "className": "barChart",
          "width": 200,
          "height": 200
        }, {
          "name": "堆积柱形图",
          "type": "highchart",
          "typesFile": "1.2",
          "className": "columnChart",
          "width": 200,
          "height": 200
        }, {
          "name": "簇状条形图",
          "type": "highchart",
          "typesFile": "1.3",
          "className": "clusteredBarChart",
          "width": 200,
          "height": 200
        }, {
          "name": "簇状柱形图",
          "type": "highchart",
          "typesFile": "1.4",
          "className": "clusteredColumnChart",
          "width": 200,
          "height": 200
        }, {
          "name": "百分比堆积条形图",
          "type": "highchart",
          "typesFile": "1.5",
          "className": "hundredPercentStackedBarChart",
          "width": 200,
          "height": 200
        }, {
          "name": "百分比堆积柱形图",
          "type": "highchart",
          "typesFile": "1.6",
          "className": "hundredPercentStackedColumnChart",
          "width": 200,
          "height": 200
        }, {
          "name": "折线图",
          "type": "highchart",
          "typesFile": "2.1",
          "className": "lineChart",
          "width": 200,
          "height": 200
        }, {
          "name": "分区图",
          "type": "highchart",
          "typesFile": "2.2",
          "className": "areaChart",
          "width": 200,
          "height": 200
        }, {
          "name": "堆积面积图",
          "type": "highchart",
          "typesFile": "2.3",
          "className": "stackedAreaChart",
          "width": 200,
          "height": 200
        }, {
          "name": "折线和堆积柱形图",
          "type": "highchart",
          "typesFile": "2.4",
          "className": "lineStackedColumnComboChart",
          "width": 200,
          "height": 200
        }, {
          "name": "折线和簇状柱形图",
          "type": "highchart",
          "typesFile": "2.5",
          "className": "lineClusteredColumnComboChart",
          "width": 200,
          "height": 200
        },
        //  {
        //   "name": "功能区图表",
        //   "type": "highchart",
        //   "typesFile": "2.6",
        //   "className": "ribbonChart",
        //   "width": 200,
        //   "height": 200
        // },
        // {
        //   "name": "瀑布图",
        //   "type": "highchart",
        //   "typesFile": "3.1",
        //   "className": "waterfallChart",
        //   "width": 200,
        //   "height": 200
        // }, 
        // {
        //   "name": "散点图",
        //   "type": "highchart",
        //   "typesFile": "3.2",
        //   "className": "scatterChart",
        //   "width": 200,
        //   "height": 200
        // },
        {
          "name": "饼图",
          "type": "highchart",
          "typesFile": "3.3",
          "className": "pieChart",
          "width": 200,
          "height": 200
        }, {
          "name": "环形图",
          "type": "highchart",
          "typesFile": "3.4",
          "className": "donutChart",
          "width": 200,
          "height": 200
        }, {
          "name": "树状图",
          "type": "highchart",
          "typesFile": "3.5",
          "className": "treemap",
          "width": 200,
          "height": 200
        },
        // {
        //   "name": "地图",
        //   "type": "highchart",
        //   "typesFile": "3.6",
        //   "className": "map",
        //   "width": 200,
        //   "height": 200
        // }, {
        //   "name": "着色地图",
        //   "type": "highchart",
        //   "typesFile": "4.1",
        //   "className": "filledMap",
        //   "width": 200,
        //   "height": 200
        // }, {
        //   "name": "漏斗图",
        //   "type": "highchart",
        //   "typesFile": "4.2",
        //   "className": "funnel",
        //   "width": 200,
        //   "height": 200
        // }, 
        // {
        //   "name": "仪表",
        //   "type": "highchart",
        //   "typesFile": "4.3",
        //   "className": "gauge",
        //   "width": 200,
        //   "height": 200
        // },
        // {
        //   "name": "卡片图",
        //   "type": "highchart",
        //   "typesFile": "4.4",
        //   "className": "card",
        //   "width": 200,
        //   "height": 200
        // },
        //  {
        //   "name": "多行卡",
        //   "type": "highchart",
        //   "typesFile": "4.5",
        //   "className": "multiRowCard",
        //   "width": 200,
        //   "height": 200
        // }, {
        //   "name": "KPI",
        //   "type": "highchart",
        //   "typesFile": "4.6",
        //   "className": "kpi disabled",
        //   "width": 200,
        //   "height": 200
        // }, {
        //   "name": "切片器",
        //   "type": "highchart",
        //   "typesFile": "5.1",
        //   "className": "slicer",
        //   "width": 200,
        //   "height": 200
        // },
        // {
        //   "name": "表",
        //   "type": "elTable",
        //   "typesFile": "5.2",
        //   "className": "table",
        //   "width": 200,
        //   "height": 200
        // },
        // {
        //   "name": "矩阵",
        //   "type": "highchart",
        //   "typesFile": "5.3",
        //   "className": "matrix",
        //   "width": 200,
        //   "height": 200
        // }
      ]
    }
  },
  computed: {
    typesFile: function() {
      return this.canvasItem ? this.canvasItem.chart.typesFile : ''
    }
  },
  created() {
    this.getMyChart()
  },
  methods: {
    select(chart) {
      this.$emit('select', chart)
    },
    upload() {
      let that = this

      that.apiPost('/admin/charttypes', that.form).then(function(res) {
        if (res.code === 200) {
          /*这里做处理*/
          window.console && console.log(res);
          _g.toastMsg('success', '添加成功')
          that.dialogUploadVisible = false
          that.getMyChart()
        }
      })
    },
    getMyChart() {
      this.apiGet('admin/charttypes').then((res) => {
        this.handelResponse(res, (data) => {
          this.mycharts = data.map(function(item) {
            return {
              "name": item.name,
              "type": "highchart",
              "typesFile": JSON.parse(item.content.replace(/\n/gi, '')),
              "className": "mime",
              "width": 200,
              "height": 200
            }
          })
        })
      })
    }
    // getClass: function(item) {
    //   if (item.options) {
    //     return item.type + '-' + (item.options.chart.type || '') + (item.options.series && item.options.series[0].type ? '-' + item.options.series[0].type : '')
    //   } else {
    //     return item.type
    //   }
    // }
  },
  components: {},
  mixins: [http]
}
</script>
<style lang="less" scope>
ul {
  padding: 0;
}

.main {
  padding: 6px;
}

.visual-icon {
  background: url('../../../../assets/images/sprites.png') no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin: 3px;
  cursor: pointer;
  &.barChart {
    background-position: -258px -220px
  }
  &.barChart.disabled {
    background-position: 0 -258px
  }
  &.columnChart {
    background-position: -153px -132px
  }
  &.columnChart.disabled {
    background-position: -78px -152px
  }
  &.hundredPercentStackedBarChart {
    background-position: -140px -238px
  }
  &.hundredPercentStackedBarChart.disabled {
    background-position: -200px -238px
  }
  &.hundredPercentStackedColumnChart {
    background-position: -258px -180px
  }
  &.hundredPercentStackedColumnChart.disabled {
    background-position: -258px -200px
  }
  &.clusteredBarChart {
    background-position: -238px -140px
  }
  &.clusteredBarChart.disabled {
    background-position: -238px -160px
  }
  &.clusteredColumnChart {
    background-position: -238px -180px
  }
  &.clusteredColumnChart.disabled {
    background-position: 0 -238px
  }
  &.lineChart {
    background-position: -220px -238px
  }
  &.lineChart.disabled {
    background-position: -258px -80px
  }
  &.pieChart {
    background-position: -100px -218px
  }
  &.pieChart.disabled {
    background-position: -80px -218px
  }
  &.donutChart {
    background-position: -20px -198px
  }
  &.donutChart.disabled {
    background-position: -40px -198px
  }
  &.map {
    background-position: -258px -100px
  }
  &.map.disabled {
    background-position: -258px -120px
  }
  &.esriVisual {
    background-position: -57px -152px
  }
  &.esriVisual.disabled {
    background-position: -36px -152px
  }
  &.funnel {
    background-position: -238px -200px
  }
  &.funnel.disabled {
    background-position: -40px -238px
  }
  &.debugVisual,
  &.debugVisual.disabled {
    background-position: -192px -174px
  }
  &.delete {
    background-position: 0 -198px
  }
  &.gauge {
    background-position: -60px -238px
  }
  &.gauge.disabled {
    background-position: -80px -238px
  }
  &.treemap {
    background-position: -180px -218px
  }
  &.treemap.disabled {
    background-position: -140px -218px
  }
  &.sunburst {
    background-position: -278px -208px
  }
  &.sunburst.disabled {
    background-position: -278px -176px
  }
  &.multiRowCard {
    background-position: -218px -80px
  }
  &.multiRowCard.disabled {
    background-position: -218px -180px
  }
  &.card {
    background-position: -218px -20px
  }
  &.card.disabled {
    background-position: -218px -40px
  }
  &.matrix {
    background-position: -258px -140px
  }
  &.matrix.disabled {
    background-position: -258px -160px
  }
  &.waterfallChart {
    background-position: -238px -100px
  }
  &.waterfallChart.disabled {
    background-position: -160px -198px
  }
  &.slicer {
    background-position: -92px -174px
  }
  &.slicer.disabled {
    background-position: -72px -174px
  }
  &.lineClusteredColumnComboChart {
    background-position: -258px 0
  }
  &.lineClusteredColumnComboChart.disabled {
    background-position: -258px -20px
  }
  &.lineStackedColumnComboChart {
    background-position: -258px -40px
  }
  &.lineStackedColumnComboChart.disabled {
    background-position: -258px -60px
  }
  &.dataDotClusteredColumnComboChart {
    background-position: -112px -174px
  }
  &.dataDotClusteredColumnComboChart.disabled {
    background-position: -132px -174px
  }
  &.dataDotStackedColumnComboChart {
    background-position: -152px -174px
  }
  &.dataDotStackedColumnComboChart.disabled {
    background-position: -172px -174px
  }
  &.areaChart {
    background-position: -60px -198px
  }
  &.areaChart.disabled {
    background-position: -120px -198px
  }
  &.stackedAreaChart {
    background-position: -238px -120px
  }
  &.stackedAreaChart.disabled {
    background-position: -238px -60px
  }
  &.filledMap {
    background-position: -200px -218px
  }
  &.filledMap.disabled {
    background-position: -238px 0
  }
  &.shapeMap {
    background-position: -258px -240px
  }
  &.shapeMap.disabled {
    background-position: -238px -220px
  }
  &.kpi {
    background-position: -160px -238px
  }
  &.kpi.disabled {
    background-position: -180px -238px
  }
  &.ribbonChart {
    background-position: -20px -218px
  }
  &.ribbonChart.disabled {
    background-position: 0 -218px
  }
  &.table {
    background-position: -238px -40px;
  }
  &.table.table.disabled {
    background-position: -238px -20px;
  }
  &.scatterChart {
    background-position: -218px -120px;
  }
  &.scatterChart.disabled {
    background-position: -218px -100px;
  }
  &.mime {
    background-position: -93px -174px;
  }
  &.mime.disabled {
    background-position: -73px -174px;
  }
}
</style>
